<template>
    <div class="sjzxSearch">
        <div class="search">
            <input
                class="search-input"
                v-model="keyword"
                type="text"
                placeHolder="输入地名或者地址"
            />
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li
                    class="search-item border-bottom"
                    v-for="(item, index) of list"
                    :key="item.id"
                    @click="handleFlyto(item)"
                >
                    <span class="orderNum">
                        {{ orderList[index] }}
                    </span>
                    {{ item.name ? item.name : item.mc }}
                </li>
                <li class="search-item border-bottom" v-show="hasNoData">
                    没有找到匹配数据
                </li>
            </ul>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="totalItem"
                :pager-count="5"
                size="small"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios from "axios";
let currentEntity = null;
export default {
    name: "search",
    data() {
        return {
            keyword: "",
            list: [],
            timer: null,
            pageSize: 10,
            orderList: [],
            totalItem: 1000,
        };
    },
    methods: {
        handleCityClick(city) {
            //this.changeCity(city)
        },
        //定位
        handleFlyto(item) {
            let location = item.location;
            if (currentEntity) {
                viewer.entities.remove(currentEntity);
                currentEntity = null;
            }
            currentEntity = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(
                    location.lon,
                    location.lat
                ),
                billboard: {
                    image: `./data/images/earth/local2.png`,
                    scale: 0.8,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    scaleByDistance: new Cesium.NearFarScalar(
                        10000,
                        1,
                        100000,
                        1
                    ),
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    width: 52,
                    height: 50,
                },
                label: {
                    text: item.name ? item.name : item.mc,
                    show: true,
                    fillColor: Cesium.Color.LAWNGREEN, //字体颜色
                    // backgroundColor: Cesium.Color.GREY, //背景颜色
                    // showBackground: true, //是否显示背景颜色
                    // outlineColor: Cesium.Color.DARKGOLDENROD,
                    // style: Cesium.LabelStyle.WHITE, //label样式
                    // outlineWidth: 1,
                    outlineColor: Cesium.LabelStyle.BLACK,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
                    outlineWidth: 4,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
                    pixelOffset: new Cesium.Cartesian2(0, -10), //偏移
                    scaleByDistance: new Cesium.NearFarScalar(
                        100000,
                        1,
                        1000000,
                        0.5
                    ),
                    distanceDisplayCondition:
                        new Cesium.DistanceDisplayCondition(0, 5000),
                },
                entityType: "singlePoi",
            });
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(
                    location.lon,
                    location.lat,
                    5000
                ),
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentChangePage(this.list, val);
        },
        //生成连续数字
        progressiveArray(start, end) {
            start = Number(start);
            end = Number(end);
            end = end > start ? end : start;
            return [...Array(end + 1).keys()].slice(start);
        },
        //分页的方法
        currentChangePage(list, currentPage) {
            let from = (currentPage - 1) * this.pageSize;
            let to = currentPage * this.pageSize;
            axios
                .get(
                    `http://172.25.110.34/api/emergency-visual/cehuiju/v2/dmdz?page_size=${this.pageSize}&page_num=${to}&dz=${this.keyword}`
                )
                .then((res) => {
                    console.log(res.data.data);
                    this.list = res.data.data;
                    this.orderList = this.progressiveArray(from, to);
                    console.log(this.orderList);
                });
        },
    },
    computed: {
        hasNoData() {
            return !this.list.length;
        },
    },
    watch: {
        keyword() {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            if (!this.keyword) {
                this.list = [];
                return;
            }
            this.timer = setTimeout(() => {
                //http://172.25.110.34/api/emergency-visual/cehuiju/local/dmdz_dmdz_dm
                axios
                    .get(
                        `http://172.25.110.34/api/emergency-visual/cehuiju/v2/dmdz?page_size=${this.pageSize}&page_num=0&dz=${this.keyword}`
                    )
                    .then((res) => {
                        this.list = res.data.data;
                        this.orderList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                    });
            }, 100);
        },
    },
    mounted() {},
};
</script>

<style lang="stylus" scoped>
.sjzxSearch {
    .search {
        height: vw(40);
        padding: vw(10);
        background: transparent;
        position: absolute;
        top: vh(76);
        right: vw(435);
        width: vw(184);
        z-index: 2;

        .search-input {
            box-sizing: border-box;
            width: 100%;
            height: vh(40);
            padding: vh(10);
            line-height: vh(40);
            text-align: left;
            border-radius: vw(6);
            font-size: vw(14);
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            border: 1px solid #409EFF;
            outline: none;
        }
    }

    .search-content {
        overflow: hidden;
        position: absolute;
        z-index: 3;
        top: vh(150);
        right: vw(435);
        width: vw(280);
        background: rgba(0, 0, 0, 0.5);
        border-radius: vw(6);
        padding: vw(10);

        .search-item {
            line-height: vh(30);
            padding-left: vw(5);
            padding-bottom: vh(10);
            color: #fff;
            cursor: pointer;
            font-family: 'Lato', sans;
            font-size: vw(16);
            list-style: none;
            margin: 0 0 vh(10) vw(0);
            position: relative;
            border-bottom: 1px solid #ddd;

            .orderNum {
                background: #8da97d;
                display: inline-block;
                width: vw(20);
                height: vh(20);
                line-height: vh(20);
                text-align: center;
            }
        }
    }
}
</style>